<template>
  <!------------------------------------ 时间筛选组件 ------------------------------------
    @desc 时间筛选，类别筛选
    @author kyle
    @date 2020-08-13
    @props
      dateSelect    ————  时间选择组件显示、隐藏
      filterList    ————  筛选分类列表
      theme         ————  主题
    @methods
      onConfirm     ————  确认
      openDateSelect ———— 打开时间选择
      close         ————  关闭时间选择
      getData       ————  传递dataTime

  -->
  <div :class="themeClass">
    <van-tabbar v-model="active" :fixed="fixed" :border="border" @change="onChange">
      <van-tabbar-item v-for="(item,index) in filterList" :key="index">{{ item }}</van-tabbar-item>
    </van-tabbar>
    <div
      v-if="theme === '1'"
      class="date-box bg-gray-1 dis-inb flex-s-c plr-20 br-25 flex-s-0 flex-g-0 ml-20"
      @click="openDateSelect"
    >
      <span>{{ requestData.datetime }}</span>
      <van-icon :name="Icon" size="12" />
    </div>

    <van-popup v-model="dateSelect" position="bottom" @click-overlay="clickOverlay">
      <van-datetime-picker
        v-model="currentDate"
        item-height="45"
        visible-item-count="4"
        type="year-month"
        title="请选择时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
        @cancel="clickOverlay"
      />
    </van-popup>
  </div>
</template>

<script>
import utils from 'utils/utils'
export default {
  name: 'StateFilter',
  components: {
  },
  props: {
    dateSelect: {
      type: Boolean,
      default: false
    },
    filterList: {
      type: Array,
      required: true,
      default: function() {
        return []
      }
    },
    theme: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      fixed: false,
      border: false,
      active: 0,
      Icon: 'arrow-down',
      requestData: {
        datetime: '',
        index: ''
      },
      minDate: new Date(1920, 0, 1),
      maxDate: new Date(2120, 11, 1),
      currentDate: new Date()
    }
  },
  computed: {
    themeClass() {
      if (this.theme) {
        return ' flex-s-c tabber-box-' + this.theme
      } else {
        return ' flex-s-c'
      }
    }
  },
  watch: {
    dateSelect(newVal, oldVal) {
      if (newVal === true) {
        this.Icon = 'arrow-up'
      } else {
        this.Icon = 'arrow-down'
      }
    }
  },
  created() {
    this.requestData.datetime = utils.dateFomat('yyyy', new Date()) + '年' + utils.dateFomat('m', new Date()) + '月'
  },
  methods: {
    onChange(index) {
      this.requestData.index = index
      this.transferData()
    },
    openDateSelect() {
      this.$emit('openDateSelect')
    },
    onConfirm() {
      const value = this.currentDate
      this.requestData.datetime = utils.dateFomat('yyyy', value) + '年' + utils.dateFomat('m', value) + '月'
      // this.requestData
      this.$emit('onConfirm', this.currentDate)
    },
    clickOverlay() {
      this.$emit('close')
    },

    // 将datetime传给父组件
    transferData() {
      this.$emit('getData', this.requestData)
    }
  }
}
</script>
<style lang="scss" scoped>
/* 标签栏*/
.tabber-box-1 {
  /deep/.van-tabbar {
    background: transparent;
    height: auto;
    justify-content: space-between;
    margin: 12px 0;
    overflow-y: hidden;
    overflow-x: scroll;
    .van-tabbar-item {
      font-size: 12px;
      line-height: 2;
      flex: auto;
      flex-shrink: 0;
      .van-tabbar-item__icon {
        margin: 0;
      }
      .van-tabbar-item__text {
        padding: 0 10px;
      }
    }
    .van-tabbar-item--active {
      color: $colorF;
      border-radius: 12px;
      @include bg-second;
    }
  }
  .date-box {
    height: 50px;
    line-height: 50px;
  }
}
.tabber-box-0 {
  /deep/.van-tabbar {
    background: transparent;
    height: auto;
    justify-content: space-between;
    margin: 12px 0;
    overflow-y: hidden;
    overflow-x: scroll;
    .van-tabbar-item {
      font-size: 12px;
      line-height: 2;
      flex: auto;
      flex-shrink: 0;
      color: $colorF;
      .van-tabbar-item__icon {
        margin: 0;
      }
      .van-tabbar-item__text {
        padding: 0 10px;
      }
    }
    .van-tabbar-item--active {
      @include color-primary;
      border-radius: 12px;
      background: $colorF;
    }
  }
  .date-box {
    height: 50px;
    line-height: 50px;
  }
}
</style>
